<template>
<view class="container padding">
	<!-- 设置密码 -->
	<view class="resource-item-footer sec-top">设置密码</view>
	<view class="profile-banner detail-white">
		<view class="task-list">
			<view class="task-item"
				@click="onTaskItem('password')">
				<view class="task-item-content">
					<text>重置密码</text>
				</view>
				<view class="task-item-action">
					<text>修改</text>
				</view>
			</view>
		</view>
	</view>
	<!-- 账号绑定 -->
	<view class="resource-item-footer sec-top">账号绑定(有助于账号丢失后快速找回)</view>
	<view class="profile-banner detail-white">
		<view class="task-list">
			<!-- #ifdef APP-PLUS -->
			<view class="task-item border"
				@click="onTaskItem('wechat')">
				<view class="task-item-content">
					<text>绑定微信</text>
				</view>
				<view class="task-item-action">
					<text>修改</text>
				</view>
			</view>
			<!-- #endif -->
			<view class="task-item"
				@click="onTaskItem('telephone')">
				<view class="task-item-content">
					<text>绑定手机</text>
				</view>
				<view class="task-item-action">
					<text class="text-custom">138****0000</text>
					<text class="sec-left">修改</text>
				</view>
			</view>
		</view>
	</view>
	<!-- 修改密码 -->
	<uni-popup id="password"
		ref="password"
		type="center"
		:animation="true">
		<view class="popup">
			<view class="form-item border">
				<input v-model="newpassword"
					type="password"
					class="popup-input"
					name="telephone"
					placeholder="请输入新密码" />
			</view>
			<view class="form-item border">
				<input v-model="confirmpassword"
					type="password"
					class="popup-input"
					name="telephone"
					placeholder="请再次输入密码" />
			</view>
			<view class="shim sec-top">
				<text class="text-custom"
					@click="onClose">取消</text>
				<view class="btn btn-primary large"
					style="padding: 0 36rpx;"
					@click="onGetCode('password')">
					<text>确定</text>
				</view>
			</view>
		</view>
	</uni-popup>
	<!-- 弹窗 -->
	<uni-popup id="popup"
		ref="popup"
		type="center"
		:animation="true">
		<view class="popup">
			<view class="resource-item-footer">请先验证手机号</view>
			<view class="form-item border">
				<input class="popup-input"
					name="telephone"
					placeholder="请输入手机号" />
			</view>
			<view class="shim sec-top">
				<text class="text-custom"
					@click="onClose">取消</text>
				<view class="btn btn-primary large"
					style="padding: 0 36rpx;"
					@click="onGetCode('telephone')">
					<text>获取验证码</text>
				</view>
			</view>
		</view>
	</uni-popup>
	<!-- Toast -->
	<uni-popup id="toast"
		ref="toast"
		type="center"
		:animation="true">
		<view class="padding-all detail-white">{{ text }}</view>
	</uni-popup>
</view>
</template>

<script>
import { postResetPassword } from '@/api/index.js';
export default {
	data() {
		return {
			newpassword: null,
			confirmpassword: null,
			text: ''
		}
	},
	onShow() {
		const token = uni.getStorageSync('X-Auth-Token');
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
	},
	methods: {
		onGetCode(type) {
			if (type === 'password') {
				if (!(this.newpassword && this.confirmpassword)) {
					this.text = '请先输入密码！';
					this.$refs.toast.open();
					setTimeout(() => {
						this.$refs.toast.close();
					}, 1000);
					return;
				}
				postResetPassword({
					newpassword: this.newpassword,
					confirmpassword: this.confirmpassword
				}).then(res => {
					if (res.data) {
						this.text = '密码修改成功！';
						this.$refs.toast.open();
						setTimeout(() => {
							this.$refs.toast.close();
						}, 1000);
					}
					this.onClose();
				});
			}
			else {
				this.onClose();
			}
		},
		onClose() {
			this.$refs.popup.close();
			this.$refs.password.close();
		},
		onTaskItem(type) {
			switch(type) {
				case 'password':
					this.newpassword = null;
					this.confirmpassword = null;
					this.$refs.password.open();
					break;
				case 'telephone':
					this.$refs.popup.open();
					break;
				default:
					break;
			}
		}
	}
}
</script>
